<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基础信息" name="first">
        <el-form ref="addForm1" :model="addForm" :rules="rules" label-width="100px" class="add-ruleForm">
          <el-form-item label="标题" prop="title">
            <el-row>
              <el-col :span="16"><el-input v-model="addForm.title" /></el-col>
              <el-col :span="1"><el-button icon="el-icon-search">查重</el-button></el-col>
            </el-row>
          </el-form-item>
          <el-row>
            <el-col :span="10"> <el-form-item label="作者" prop="author"><el-input v-model="addForm.author" /></el-form-item></el-col>
            <el-col :span="8"> <el-form-item label="分类" prop="cateid">
              <el-select v-model="addForm.cateid" placeholder="请选择">
                <el-option v-for="item in catelist" :key="item.id" :label="item.catename" :value="item.id" />
              </el-select>
            </el-form-item></el-col>
          </el-row>
          <el-row>
            <el-col :span="10"> <el-form-item label="阅读次数" prop="click"> <el-input-number v-model="addForm.click" :min="1" @change="handleChange" /></el-form-item></el-col>
            <el-col :span="8"> <el-form-item label="创建时间" prop="create_date">
              <el-date-picker v-model="addForm.create_date" type="datetime" placeholder="选择日期" format="yyyy-MM-dd hh:mm:ss" value-format="timestamp" />
            </el-form-item></el-col>
          </el-row>
          <el-row>
            <el-col :span="10"> <el-form-item label="是否推荐" prop=" ishot">
              <el-switch v-model="addForm.ishot" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" />
            </el-form-item></el-col>
            <el-col :span="8"> <el-form-item label="是否置顶" prop=" istop">
              <el-switch v-model="addForm.istop" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" />
            </el-form-item></el-col>
          </el-row>
          <el-row>
            <el-col :span="10"><el-form-item label="收藏数量" prop="lovenum"><el-input v-model="addForm.lovenum" placeholder="请输入收藏数量名称" /></el-form-item></el-col>
          </el-row>
          <el-form-item label="文章缩略图" prop="fileList">
            <el-upload
              class="upload-demo"
              action="http://124.223.14.236:8060/admin/common/upload?type=images"
              :limit="1"
              :headers="headers"
              :on-success="fileSuccess"
              :file-list="addForm.fileList"
              :on-remove="fileremove"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="文章标签" prop="tags">
            <el-checkbox-group v-model="addForm.tags">
              <el-checkbox v-for="item in taglist" :key="item.id" :label="item.tagname" />
            </el-checkbox-group>
          </el-form-item>
          <el-row>
            <el-col :span="6" :style="{visibility: 'hidden'}">
              1
            </el-col>
            <el-col
              :span="
                10"
            >
              <el-form-item>
                <el-button ref="btn1" icon="el-icon-plus" size="small" type="success" @click="submitForm('0')">立即发布</el-button>
                <el-button icon="el-icon-folder-add" size="small" type="primary" @click="submitForm('1')">保存草稿</el-button>
                <el-button icon="el-icon-back" size="small" type="warning" @click="$router.push('/content_article')">返回列表</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form></el-tab-pane>
      <el-tab-pane label="SEO信息" name="second">
        <el-form ref="addForm2" :model="addForm" :rules="rules" label-width="100px" class="seo-ruleForm">
          <el-form-item label="seo关键字" prop="keywords">
            <el-input v-model="addForm.keywords" type="textarea" :rows="3" placeholder="请输入seo关键字名称" />
          </el-form-item>
          <el-form-item label="seo的描述" prop="description">
            <el-input v-model="addForm.description" type="textarea" :rows="3" placeholder="请输入seo的描述名称" />
          </el-form-item>
          <el-row>
            <el-col :span="6" :style="{visibility: 'hidden'}">
              1
            </el-col>
            <el-col
              :span="
                18"
            >
              <el-form-item>
                <el-button ref="btn2" icon="el-icon-plus" size="small" type="success" @click="submitForm('0')">立即发布</el-button>
                <el-button icon="el-icon-folder-add" size="small" type="primary" @click="submitForm('1')">保存草稿</el-button>
                <el-button icon="el-icon-back" size="small" type="warning" @click="$router.push('/content_article')">返回列表</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="文章内容" name="third">
        <el-form ref="addForm3" :model="addForm" :rules="rules" class="lastform">
          <el-form-item label="文章内容" prop="content">
            <quill-editor v-model="addForm.content" class="richtxt" :options="editorOption" @change="$refs.addForm3.validateField('content')" />
          </el-form-item>
          <el-form-item class="btns">
            <el-button ref="btn3" icon="el-icon-plus" size="small" type="success" @click="submitForm('0')">立即发布</el-button>
            <el-button icon="el-icon-folder-add" size="small" type="primary" @click="submitForm('1')">保存草稿</el-button>
            <el-button icon="el-icon-back" size="small" type="warning" @click="$router.push('/content_article')">返回列表</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { getalltags } from '@/api/tags'
import { allcate } from '@/api/cate'
import { addarticle, articledetail, editarticle } from '@/api/article'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      editorOption: {
        placeholder: '请输入文本...'
      },
      timer: true,
      activeName: 'first',
      taglist: [],
      catelist: [],
      addForm: {
        title: '',
        author: '',
        click: '',
        create_date: '',
        ishot: '0',
        istop: '0',
        lovenum: '',
        tags: [],
        pic: '',
        description: '',
        keywords: '',
        content: '',
        cateid: '',
        status: '',
        fileList: []
      },
      rules: {
        title: [
          { required: true, message: '请输入标题名称', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入作者', trigger: 'blur' }
        ],
        cateid: [
          { required: true, message: '请选择分类', trigger: 'change' }
        ],
        create_date: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'blur' }
        ],
        lovenum: [
          { required: true, message: '请输入收藏数量', trigger: 'blur' },
          { pattern: /\d+/, message: '请输入数字', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入文章描述', trigger: 'blur' }
        ],
        keywords: [
          { required: true, message: '请输入关键词', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请填写文章内容', trigger: 'blur' }
        ],
        tags: [
          { required: true, message: '请选择文章标签', trigger: 'change' }
        ],
        click: [
          { required: true, trigger: 'blur' }
        ],
        fileList: [
          {
            validator: (rule, value, callback) => {
              // console.log(value)
              if (value && value.length > 0) {
                callback()
              } else {
                callback(new Error('请上传文件！'))
              }
            }, trigger: 'change'
          }
        ]
      }
    }
  },
  computed: {
    headers() {
      return {
        'X-Token': this.$store.getters.token
      }
    }
  },
  async created() {
    // 获取所有标签
    const res1 = await getalltags()
    console.log(res1)
    this.taglist = res1
    // 获取所有分类
    const res2 = await allcate()
    console.log(res2)
    this.catelist = res2
    // 查询参数
    if (this.$route.query.id) {
      const res = await articledetail(this.$route.query.id)
      console.log(res)
      delete res.user_id
      delete res.update_date
      this.addForm = res
      this.addForm.id = this.$route.query.id
      this.addForm.tags = res.tags.split(',')
      this.addForm.fileList = [{ url: 'http://124.223.14.236:8060/' + res.pic }]
    }
  },
  methods: {
    async submitForm(status) {
      Promise.all([this.$refs.addForm1.validate(), this.$refs.addForm2.validate(), this.$refs.addForm3.validate()])
        .then(async() => {
          if (this.$route.query.id) {
            delete this.addForm.fileList
            this.addForm.tags = this.addForm.tags.join(',')
            const res = await editarticle(this.addForm)
            console.log(res)
            this.$message.success('修改成功')
            this.$router.push('/content_article')
          } else {
            // console.log(results)
            delete this.addForm.fileList
            this.addForm.status = status
            this.addForm.tags = this.addForm.tags.join(',')
            console.log(this.addForm)
            const res = await addarticle(this.addForm)
            console.log(res)
            this.$message.success('发布成功')
            this.$router.push('/content_article')
          }
        })
        .catch(() => {
          console.log(this.addForm)
          console.log(this.addForm.fileList)
          this.$message.warning('验证失败')
        })
    },
    handleChange(value) {
      // console.log(value)
    },
    // fileChange(file, fileList) {
    //   // console.log(fileList)
    //   setTimeout(() => {
    //     console.log(file.response.data.savePath)
    //     this.addForm.pic = file.response.data.savePath
    //   }, 100)
    //   this.addForm.fileList = fileList
    //   console.log(this.addForm.fileList)
    //   this.$refs.addForm1.validate()
    // },
    fileSuccess(response, file, fileList) {
      console.log(response.data.savePath)
      this.addForm.pic = response.data.savePath
      this.addForm.fileList = fileList
      console.log(this.addForm.fileList)
      this.$refs.addForm1.validate()
    },
    fileremove(file, fileList) {
      console.log(fileList, file)
      this.addForm.fileList = fileList
      this.$refs.addForm1.validate()
    }
  }
}
</script>
<style scoped lang="scss">
.add-ruleForm {
  width: 1000px;
  margin: 0 auto;
}
.seo-ruleForm {
  width: 800px;
  margin: 50px 100px;
}
.richtxt {
  position: absolute;
  top: -8px;
  left: 85px;
  width: 1000px;
  height: 200px;
}
.btns {
  height: 100px;
  position: relative;
  top: 240px;
  left: 500px;
}
.lastform {
  position: relative;
  margin: 50px 100px;
  height: 500px;
}
</style>
